<script>
export default {
  name: "trainindex",
  data() {
    return {
      activeName: 'second',
      form: {
        sname:'',
        ename:'',
        stime:'',

      },
      trains:{
        trainId: "",
        trainSname: "",
        trainEname: "",
        trainStime: " ",
        trainEtime: " ",
        trainNumber: "",
        trainSeat: "",
        trainPrice: "",
        trainType: ""
      },
      fits: ['fill'],
      url:'https://simg4.qunarzz.com/train/images/searchbox_bg2.png',


    }
  },
  mounted() {
    this.findAll();
  },
  methods:{
    onSubmit(){
      this.$axios.get('/fonttrain/eonesone', {
        params:{
          sname:this.form.sname,
          ename:this.form.ename
        }}).then(res=>{

        // console.log(res)
        // console.log(res.data)
        // console.log(res.data.data)

        this.trainlist=res.data.data;

        // console.log(this.trainlist)

        //路由带参数跳转
        this.$router.push({name:'traindetails',params:{data:this.trainlist}});

        // if ( this.trainlist.trainSname==''||this.trainlist.trainEname=='' ){
        //       alert("暂无此售票信息,请重新查询")
        // }
        // if (res.data.code==200){
        //    this.$router.push('/traindetails')
        //  }
      })
    },
    findAll(){
      this.$axios.get('/fonttrain/findall').then(res=>{
        console.log(res);
        this.trains=res.data.data.records;
      })
    },
    findById(airId){
      console.log(airId)
      // this.$router.push({path:'/airsShow',query:{airId:airId}})
    },


  }
}
</script>

<template>
  <div >
    <div id="b" style="margin-left:160px">
      <el-col :offset="5" :span="18">
        <el-row>
          <el-col :offset="12" :span="12">
            <a class="header_a">适老化及无障碍</a>
            <a class="header_a">请登录</a>
            <span class="header_a">或</span>
            <a class="header_a">免费注册</a>
            <a class="header_a">消息</a>
            <a class="header_a">查看订单</a>
            <a class="header_a">积分商城</a>
            <a class="header_a">联系客服</a>
          </el-col>
        </el-row>
      </el-col>
      <el-col>
        <el-row>
          <el-col :span="19">
            <img class="header_img" style="width: 136px;height: 54px" src="https://s.qunarzz.com/f_cms/2021/1638865973476_447461838.png"/>
            <a class="header_a2">首页</a>
            <a class="header_a2">机票</a>
            <a class="header_a2">酒店</a>
            <a class="header_a2">团购</a>
            <a class="header_a2">度假</a>
            <a class="header_a2">邮轮</a>
            <a class="header_a2">门票</a>
            <a class="header_a2">火车票</a>
            <a class="header_a2">攻略</a>
            <a class="header_a2">当地人</a>
            <a class="header_a2">汽车票</a>
          </el-col>
        </el-row>
      </el-col>
    </div>
    <div style="width: auto; background-image: url(//s.qunarzz.com/open_m_train/train_pc/pc-banner.jpg)" >
      <div id="a"  style="margin-left:160px">
        <h1>火车票预定</h1>
        <el-tabs  >
          <el-tab-pane label="国内火车票" >
            <el-form ref="form" :model="form" label-width="10px" style="width: auto">

              <el-form-item  >
                <el-col :span="11">
                  <el-input v-model="form.sname" placeholder="请输入要出发的城市名称"></el-input>
                </el-col>
                <el-col class="line" :span="1" >=></el-col>
                <el-col :span="11">
                  <el-input v-model="form.ename" placeholder="请输入要到达的城市名称"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item  >
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择出行时间" v-model="form.stime" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item >
                <el-col :span="17">
                  <div style="font-size: 15px;color: red">
                    24小时客服电话：95117 <br>全程预订保障 去哪儿都放心
                  </div>
                </el-col>
                <el-button type="primary" @click="onSubmit">搜索</el-button>

              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="demo-image"  style="padding-top: 50px ">
      <div class="block" v-for="fit in fits" :key="fit">
        <el-image
            style="width: auto; height: 170px"
            :src="url"
            :fit="fit"></el-image>

      </div>
    </div>
    <div style="padding-top: 50px;margin-left:160px ">
      <div>
        <h3 style="display: inline;
                  font: normal 24px/24px Microsoft Yahei;
                  color: #0e83bf;">
          国内火车票
        </h3>
        <a style=" margin-left: 400px ; font-size: 18px;  display: inline-block;">西安|</a>
        <a style="  font-size: 18px;  display: inline-block;">成都|</a>
        <a style="  font-size: 18px;  display: inline-block;">上海|</a>
        <a style="  font-size: 18px;  display: inline-block;">重庆|</a>
        <a style="  font-size: 18px;  display: inline-block;">深圳|</a>
        <a style="  font-size: 18px;  display: inline-block;">广州|</a>
        <a style="  font-size: 18px;  display: inline-block;">杭州|</a>
        <a style="  font-size: 18px;  display: inline-block;">北京</a>
      </div>
      <div style=" width: 920px; height: 490px;border:2px solid  #0e83bf; ">
        <div id="left-1">
          <div >
            <form style="padding-top: 15px" :ref="trains" v-for="train in trains" :key="train.trainId">
              &nbsp; &nbsp; &nbsp; &nbsp;
              <span>{{ train.trainSname }}</span>
              <i class="el-icon-right"></i>
              <span>{{ train.trainEname }}</span>
              &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
              <span>{{ train.trainStime }}</span>
              &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
              <span>￥{{ train.trainPrice }}</span>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div style="padding-top: 50px;margin-left:160px">
      <img style="width: 1100px;" src="../assets/5.jpg">
    </div>
  </div>
</template>

<style scoped>
#a{
  width: 650px;
  height: 336px;
  border: 6px solid #00afc7;
  background: #fff;
}
#b{
  width: 1200px;
  height:90px;

}
#left-1{
  width: 460px;
  height: 490px ;

  float: left;
}

.header_a{
  font-size: 12px;
  margin-top: 0px;
  margin-left: 5px;
}
.header_img{
  float: left;
  margin-bottom: 0px;
}
.header_a2{
  font-size: 15px;
  font-family: "Hiragino Sans GB";
  float: left;
  margin-right: 12px;
  margin-top: 30px;
}
</style>
